<template>
  <div class="tiandimap" :style="{height:props.height}">
    <div ref="mapContainer" :id="elId"></div>
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import usePubSub from '@/components/BigeMap/usePubSub';
import {useInstanceId} from '@/components/BigeMap/useInstanceId';
import { computeAlarmColor, computeAlarmTitle, convertStringToLatLng, convertStringToPath } from '@/utils/gis';
// import getScriptAsync from '@/views/dataCenter/bigemap/utils/getScriptAsync';
import getScriptAsync from '@/components/TiandiMap/getScriptAsync';
import {isProd,map_set_bigemap} from '@/consts.ts';
import {convertLnglatIn, convertLnglatOut} from '@/components/BdGisInput/tiandimap';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const mapContainer = ref<any>();
const emit = defineEmits(['initd','zoomend', 'click', 'mousemove']);
const { emit:emitInject } = usePubSub();
const instanceId = useInstanceId();
const instance = getCurrentInstance();
const elId = computed(() => {
  return `map_${instanceId}`
});

const props = defineProps({
  center: {
    type: Object,
    default: { lng: 128, lat: 45 },
  },
  zoom: {
    type: Number,
    default: 13,
  },
  height: {
    type: String,
    default: '100%',
  },
});

watch(() => props.zoom, () => {
  setTimeout(() => {
    const map = mapStore();
    map?.centerAndZoom(props.center, props.zoom)
  }, 333)
});
watch(() => props.center, () => {
  setTimeout(() => {
    const map = mapStore();
    map?.centerAndZoom(props.center, props.zoom)
  }, 333)
});

const mapStore = () => {
  return (document.querySelector(`#${elId.value}`) as any)?.bmapInst;
};

const initMap = () => {
  getScriptAsync({ exportGetter: () => window.T }).then(async (TMap:any) => {
    let BMapGL = null;

    if (!window.BM_BMapGL) {
    
    Object.assign(TMap, {
      TMarker: ((base:any) => {
        const Marker = function() {
          const args = Array.prototype.map.call(arguments, (x:any) => x);
          base.apply(this, args);

          this._div = document.createElement('div');
          this._div.className = 'tiandimap-marker';
        };

        const prototype = Object.create(base.prototype);
        const {setLngLat,getLngLat} = prototype;
        prototype.constructor = Marker;
        Marker.prototype = Object.assign(prototype, {
          addEventListener(eventName:string, cb:any) {
            this._div.addEventListener(eventName, (e:any) => {
              typeof cb =='function' && cb(e);
            });
          },
          onAdd(map:any) {
            this.map = map;
            const div = this._div;
            div.style.position = 'absolute';
            map.getPanes().overlayPane.appendChild(this._div);
            this.update();
          },
          onRemove(map:any) {
            const parent = this._div?.parentNode;;
            if (parent) {
              parent.removeChild(this._div);
            }
          },
          setLatLng(lnglat) {
            setLngLat.call(this, lnglat);
            this.update();
          },
          getLatLng() {
            return getLngLat.call(this)
          },
          update() {
            if (this.map) {
              const pos = this.map.lngLatToLayerPoint(this.getLngLat());
              this._div.style.top = `${pos.y}px`;
              this._div.style.left = `${pos.x}px`;

              if (this.options.icon?.getHtml) {
                this._div.innerHTML = this.options.icon.getHtml();
              }
            }
          },
          setContent(content:any) {
            this.options.content = content;
            if (this.options.icon?.getHtml) {
              this.options.icon.setContent(content);
              this._div.innerHTML = this.options.icon.getHtml();
            }
          },
          setOffset(offset:any) {
            this.options.offset = offset;
            if (this.options.icon?.getHtml) {
              this.options.icon.setOffset(offset);
              this._div.innerHTML = this.options.icon.getHtml();
            }
          },
          setIcon(icon:any) {
            this.options.icon = icon;
            if (this.options.icon?.getHtml) {
              this._div.innerHTML = this.options.icon.getHtml();
            }
          },
          setStyle(styles:any) {
            this.options.styles = styles;
            if (this.options.icon?.getHtml) {
              this.options.icon.setStyle(styles);
              this._div.innerHTML = this.options.icon.getHtml();
            }
          },
        });
        return Marker 
      })(TMap.Marker),
      marker(lnglat:any, opts:any) {
        return new this.TMarker(lnglat, opts)
      },

      DivIcon: ((base:any) => {
        const Icon = function() {
          const args = Array.prototype.map.call(arguments, (x:any) => x);
          base.apply(this, args);

          const opts = args[0];
          const bgPos = opts?.bgPos||[];
          const styles = opts?.styles||{};

          const offset = {x: bgPos[0]||0, y: bgPos[1]||0};

          const _el = document.createElement('div');
          _el.className = 'tiandimap-divIcon';
          _el.innerHTML = opts?.html||'';
          Object.keys(styles).forEach((k) => {
            _el.style[k] = styles[k];
          });
          _el.style.transform = `translate(${offset.x}px, ${offset.y}px)`;
          this._el = _el;
        };

        const prototype = Object.create(base.prototype);
        prototype.constructor = Icon;
        Icon.prototype = Object.assign(prototype, {
          getHtml() {
            return this._el.outerHTML
          },
          setContent(content:any) {
            this._el.innerHTML = content;
          },
          setStyle(styles:any) {
            const self = this;
            Object.keys(styles).forEach((k) => {
              self._el.style[k] = styles[k];
            });
          },
          setOffset(offset1:any) {
            const offset = {x: offset1?.x||0, y: offset1?.y||0};
            this._el.style.transform = `translate(${offset.x}px, ${offset.y}px)`;
          },
          /**
           * FIXME:
           */
          Rr() {
            return this._el
          },
        });
        return Icon 
      })(TMap.Icon),
      divIcon(opts:any) {
        return new this.DivIcon(opts)
      },

      latLng(lat,lng,c) {
        return new this.LngLat(lng,lat,c)
      },
    });

    BMapGL = {
      convertLnglatIn, convertLnglatOut,
      // Autocomplete: function() {
      //   this.addEventListener = () => {};
      // },
      Autocomplete: (() => {
        function debounce(func, wait) {
          let timeout;
          return function(...args) {
            clearTimeout(timeout);
            timeout = setTimeout(() => func.apply(this, args), wait);
          };
        }

        const AC = function() {
          const args = Array.prototype.map.call(arguments, (x:any) => x);
          const opts = args[0];
          let input = opts.input;
          if (typeof input == 'string') {
            input = document.getElementById(input);
          }
          if (input.__ac) {
            return;
          }

          this._input = input;
          const __ac = document.createElement('div');
          document.body.appendChild(__ac);
          __ac.classList.add('tmap-autocomplete');
          this._input.__ac = __ac;
          this._map = opts.location;
          this._eMap = {'onconfirm':[],};
          this._input.addEventListener('keyup', debounce(() => {
            if (!this._input.value) { return }
            const ls = new TMap.LocalSearch(this._map, {
              onSearchComplete: (res) => {
                console.log('--- tmap autocomplete:', res);
                const {top,left,width,height} = this._input.getBoundingClientRect();
                this._input.__ac.innerHTML = (res.suggests||[]).map((x:any) => `<div class="tmap-autocomplete__item" data-lonlat="${x.lonlat}" data-addr="${x.address}">${x.address}(${x.name})</div>`).join('');
                this._input.__ac.style.top = `${top+height}px`;
                this._input.__ac.style.left = `${left}px`;
                this._input.__ac.style.width = `${width}px`;
                this._input.__ac.style.display = 'block';
                this._input.__ac.querySelectorAll('.tmap-autocomplete__item').forEach((el) => {
                  el.addEventListener('click', (e:any) => {
                    const lonlat = e.target.getAttribute('data-lonlat');
                    const address = e.target.getAttribute('data-addr');

                    this._input.value = address;

                    this._eMap['onconfirm'].forEach((cb) => {
                      cb({item:{
                        value: {
                          province: '',
                          city: '',
                          district: '',
                          street: '',
                          business: address,
                        }
                      }})
                    });

                    setTimeout(() => {
                      this._input.__ac.style.display = 'none';
                    }, 133);
                  });
                });
              },
            });
            ls.search(this._input.value, 4);
          }, 333));
          // this._input.addEventListener('change', debounce(() => {
          //   this._eMap['onconfirm'].forEach((cb) => {
          //     cb({item:{
          //       value: {
          //         province: '',
          //         city: '',
          //         district: '',
          //         street: '',
          //         business: this._input.value,
          //       }
          //     }})
          //   });
          // }, 333));
        };
        const prototype = Object.create({});
        prototype.constructor = AC;
        AC.prototype = Object.assign(prototype, {
          addEventListener(ename, cb) {
            if (!this._input) {return}
            this._eMap[ename].push(cb);
          },
        });
        return AC
      })(),
      LocalSearch: ((base:any) => {
        const LS = function() {
          const args = Array.prototype.map.call(arguments, (x:any) => x);
          base.apply(this, args);
        };
        const prototype = Object.create(base.prototype);
        prototype.constructor = LS;
        const {getResults,search,} = prototype;
        LS.prototype = Object.assign(prototype, {
          search(kwd, type) {
            search.apply(this, [kwd, type||1]);
          },
          getResults() {
            const res = getResults.apply(this);
            Object.assign(res, {
              getPoi(inx) {
                const ppl = res.getPois();
                console.log('---- search res all:', ppl);
                const it = ppl[inx] || res.area;
                const pt = (it?.lonlat||'').split(',');
                return Object.assign({}, it, {
                  point: it?.lonlat ? {lng: pt[0], lat: pt[1]} : null,
                })
              },
            });
            return res;
          },
        });
        return LS
      })(TMap.LocalSearch),
      Point: function(lng:any,lat:any) {
        this.lng = +lng;
        this.lat = +lat;
      },
      Marker: ((base:any) => {
        const Marker = function() {
          const args = Array.prototype.map.call(arguments, (x:any) => x);
          base.apply(this, args);
        };

        const prototype = Object.create(base.prototype);
        prototype.constructor = Marker;
        Marker.prototype = Object.assign(prototype, {
          setLabel(label:any) {
            label.setLatLng(this.getLatLng());
            this.__labelLayer = label;
          },
        });
        return Marker;
      })(TMap.TMarker),
      Size: function(w,h) {
        this.width = w;
        this.height = h;
      },
      Icon: ((base:any) => {
        const Icon = function(imgUrl:string, size:any, opts:any) {
          const _el = document.createElement('div');
          _el.innerHTML = `<img width="${opts?.imageSize?.width||'auto'}" height="${opts?.imageSize?.height||'auto'}" src="${imgUrl}" />`;
          _el.style.background = 'transparent';
          _el.style.transform = `translate(-${opts?.anchor?.width||0}px, -${opts?.anchor?.height||0}px)`;

          base.apply(this, {html: _el.outerHTML});
        };

        const prototype = Object.create(base.prototype);
        prototype.constructor = Icon;
        Icon.prototype = Object.assign(prototype, {});
        return Icon;
      })(TMap.DivIcon),
      Label: function(content:string, opts:any) {
        const position = Object.assign({lat:0,lng:0}, opts.position);
        const offset = Object.assign({x:0,y:0}, opts.offset);

        const ret = TMap.marker(position, {
          content,
          offset,
          styles: opts.styles,
          icon: TMap.divIcon({
            html: content,
            bgPos: [offset.x, offset.y],
            styles: opts.styles,
          }),
        });

        return ret;
      },
      Polyline: ((base:any) => {
        const Polyline = function(ptList:any[]=[], opts:any={}) {
          const args = [ptList, {
            ...opts,
            color: opts.strokeColor,
            weight: opts.strokeWeight,
            opacity: opts.strokeOpacity,
          }];
          base.apply(this, args);

          Object.defineProperty(this, 'points', {
            get() { return this.getPath(); },
          });
          Object.defineProperty(this, '_config', {
            get() { return this.options; },
          });
          Object.defineProperty(this, 'overlayStr', {
            get() { return 'Polyline'; },
          });
        };

        const prototype = Object.create(base.prototype);
        prototype.constructor = Polyline;
        const {getLngLats:getLatLngs, setLngLats, } = prototype;
        Polyline.prototype = Object.assign(prototype, {
          setLatLngs(list:any[]) {
            setLngLats.call(this, list);
          },
          getPath(convert:boolean=false) {
            const ret = getLatLngs.call(this);
            if (convert) {
              return convertLnglatOut(ret || [])
            } else {
              return ret || []
            }
          },
          setPath(ptList:any[]) {
            this.setLatLngs(ptList);
          },
          setStrokeColor(color:any) {
            this.setOptions({color})
          },
          setStrokeWeight(weight:any) {
            this.setOptions({weight})
          },
          setPositionAt(inx:number,pt:any) {
            const ptList = this.points;
            ptList.splice(inx, 1, pt);
            this.setLatLngs(ptList);
          },
          setOptions(opts:any={}) {
            this.setStyle({
              ...opts,
              color: opts.strokeColor,
              weight: opts.strokeWeight,
              opacity: opts.strokeOpacity,
            });
          },
          enableEditing() {
            this.enableEdit();
          },
          disableEditing() {
            this.disableEdit();
          },
        });
        return Polyline;
      })(TMap.Polyline),
      Polygon: ((base:any) => {
        const Polygon = function(ptList:any[]=[], opts:any={}) {
          const args = [ptList, Object.assign({
            interactive: false,
          }, {
            ...opts,
            color: opts.strokeColor,
            weight: opts.strokeWeight,
            opacity: opts.strokeOpacity,
          })];
          base.apply(this, args);

          Object.defineProperty(this, 'points', {
            get() { return this.getPath(); },
          });
          Object.defineProperty(this, '_config', {
            get() { return this.options; },
          });
          Object.defineProperty(this, 'overlayStr', {
            get() { return 'Polygon'; },
          });
        };

        const prototype = Object.create(base.prototype);
        prototype.constructor = Polygon;
        const {getLngLats:getLatLngs, setLngLats, } = prototype;
        Polygon.prototype = Object.assign(prototype, {
          setLatLngs(list:any[]) {
            setLngLats.call(this, list);
          },
          getPath(convert:boolean=false) {
            const ret = getLatLngs.call(this);
            if (convert) {
              return convertLnglatOut(ret[0] || [])
            } else {
              return ret[0] || []
            }
          },
          setPath(ptList:any[]) {
            this.setLatLngs(ptList);
          },
          setStrokeColor(color:any) {
            this.setOptions({color})
          },
          setStrokeWeight(weight:any) {
            this.setOptions({weight})
          },
          setFillColor(fillColor:any) {
            this.setOptions({fillColor})
          },
          setPositionAt(inx:number,pt:any) {
            const ptList = this.points;
            ptList.splice(inx, 1, pt);
            this.setLatLngs(ptList);
          },
          setOptions(opts:any={}) {
            this.setStyle({
              ...opts,
              color: opts.strokeColor,
              weight: opts.strokeWeight,
              opacity: opts.strokeOpacity,
            });
          },
          enableEditing() {
            this.enableEdit();
          },
          disableEditing() {
            this.disableEdit();
          },
        });
        return Polygon;
      })(TMap.Polygon),
      Overlay: ((base:any) => {
        const Overlay = function() {
          const args = Array.prototype.map.call(arguments, (x:any) => x);
          base.apply(this, args);
        };
        const prototype = Object.create(base.prototype);
        prototype.constructor = Overlay;
        Overlay.prototype = Object.assign(prototype, {
          onAdd(mm:any) {
            this._map = mm;
          },
          onRemove(mm) {},
          show() {
            const el = this.container||this.div;
            if (el) { el.style.display = 'block'; }
          },
          hide() {
            const el = this.container||this.div;
            if (el) { el.style.display = 'none'; }
          },
          setStyle(styles:any={}) {
            const el = this.container||this.div;
            if (el) {
              Object.keys(styles).forEach((k) => {
                el.style[k] = styles[k];
              });
            }
          },
          mapSetPosition(pt:any) {
            if (this.div) {
              if (!this._map) {
                this._map = this.map;
              }
              this.bindPopup(this.div, {
                className: 'operateWindow-popup',
                closeButton: false,
              });
              this.openPopup(pt);
            }
          },
          bindPopup(el:any, opts:any) {
            const p = this._map.popupPane;
            const win = document.createElement('div');
            win.appendChild(el);
            win.className = `map-popup ${opts.className}`;
            this._popupTarget = win;
            p.appendChild(win);
          },
          openPopup(pt:any) {
            const lnglat = this._map.pointToOverlayPixel(pt);
            this._popupTarget.style.left = lnglat.x+'px';
            this._popupTarget.style.top = lnglat.y+'px';
            this._popupTarget.classList.add('show');
          },
        });
        return Overlay;
      })(TMap.Overlay),
      Control: function() {},
      Symbol: ((base:any) => {
        const Symbol = function() {
          const args = Array.prototype.map.call(arguments, (x:any) => x);
          base.apply(this, args);
        };

        const prototype = Object.create(base.prototype);
        prototype.constructor = Symbol;
        Symbol.prototype = Object.assign(prototype, {
          setCenter(pt:any) {
            this.setLatLng(pt)
          },
        });
        return Symbol;
      })(TMap.TMarker),
      Circle: void 0,
      Map: ((base:any) => {
        const Map = function() {
          const args = Array.prototype.map.call(arguments, (x:any) => x);
          base.apply(this, args);

          this.floatPane = ((mm:any) => {
            const el = document.createElement('div');
            el.classList.add('bigemap-float-pane');
            mm.getContainer().appendChild(el);
            return el;
          })(this);
          this.popupPane = ((mm:any) => {
            const el = document.createElement('div');
            el.classList.add('bigemap-popup-pane');
            mm.getContainer().appendChild(el);
            return el;
          })(this);
          this.cusOverlays = [];
        };

        const prototype = Object.create(base.prototype);
        prototype.constructor = Map;
        const {setViewport, getSize, centerAndZoom:flyTo, removeOverLay,addOverLay, containerPointToLngLat, lngLatToContainerPoint, addEventListener, } = prototype;

        Map.prototype = Object.assign(prototype, {
          addEventListener(eventName:string, cb:any) {
            addEventListener.call(this, eventName, function(e:any) {
              if (e.lnglat && !e.latlng) {
                e.latlng = e.lnglat;
              }
              typeof cb === 'function' && cb(e);
            });
          },
          enableScrollWheelZoom() {},
          getZoomUnits() {
            return 256*Math.pow(2, this.getZoom())
          },
          getOverlays() {
            return this.cusOverlays;
          },
          clearOverlays() {
            const self:any = this;
            self.cusOverlays.forEach((layer:any) => {
              removeOverLay.call(self, layer);
            });
            self.cusOverlays = [];
          },
          removeOverlay(layer) {
            if (layer) {
              try {
                removeOverLay.call(this, layer);
              } catch(e) {}
            }
            const inx = this.cusOverlays.find((x:any) => x==layer);
            if (inx>-1) {
              this.cusOverlays.splice(inx,1);
            }
          },
          addOverlay(layer:any, container?:any) {
            if (layer) {
              try {
                if (container) {
                  addOverLay.call(this, layer);
                } else {
                  addOverLay.call(this, layer);
                }
              } catch(e) {}
              this.cusOverlays.push(layer);

              if (layer.__labelLayer) {
                addOverLay.call(this, layer.__labelLayer);
                this.cusOverlays.push(layer.__labelLayer);
              }
            }
          },
          flyTo(pt:any, zoom:number, convert:boolean=false) {
            if (convert) {
              if (pt) {
                const {lng,lat} = pt;
                flyTo.call(this, convertLnglatIn({lng, lat}), zoom);
              }
            } else {
              flyTo.call(this, pt, zoom);
            }
          },
          centerAndZoom(pt:any,zoom:number, convert:boolean=false) {
            this.flyTo(pt, zoom, convert);
          },
          setCenter(pt:any) {
            this.flyTo(pt);
          },
          setMapStyleV2(opt:any) {
          },
          setViewport(ptList:any[], convert:boolean=false) {
            const bounds = ptList.reduce((ret, cur, inx) => {
              ret[0] = Math.min(ret[0], cur.lng);
              ret[1] = Math.min(ret[1], cur.lat);
              ret[2] = Math.max(ret[2], cur.lng);
              ret[3] = Math.max(ret[3], cur.lat);
              return ret;
            }, [180,90,0,0]);
            const sw = convert ? convertLnglatIn(TMap.latLng(bounds[1],bounds[0])) : TMap.latLng(bounds[1],bounds[0]);
            const ne = convert ? convertLnglatIn(TMap.latLng(bounds[3],bounds[2])) : TMap.latLng(bounds[3],bounds[2]);
            // this.flyToBounds(TMap.latLngBounds(
            //   sw, ne));
            return setViewport.call(this, [sw, ne])
          },
          getSize() {
            const ret = getSize.call(this);
            Object.assign(ret, {width:ret.x,height:ret.y});
            return ret
          },
          pixelToPoint(pixel) {
            return containerPointToLngLat.call(this, pixel)
          },
          pointToPixel(pt:any) {
            return lngLatToContainerPoint.call(this, pt)
          },
          pointToOverlayPixel(pt:any) {
            return this.pointToPixel(pt)
          },
        });
        return Map;
      })(TMap.Map),
      Pixel: ((proto) => {
        const Pixel = function(x,y) {
          this.x = x;
          this.y = y;
        };
        proto.constructor = Pixel;
        Pixel.prototype = Object.create(proto);
        return Pixel;
      })({
        equals(inst) {
          return this.x==inst.x && this.y==inst.y
        }
      }),
    };
    Object.assign(BMapGL, {
      Circle: ((base:any) => {
        const Circle = function() {
          const args = Array.prototype.map.call(arguments, (x:any) => x);
          base.apply(this, args);
        };

        const prototype = Object.create(base.prototype);
        prototype.constructor = Circle;
        Circle.prototype = Object.assign(prototype, {});
        return Circle;
      })(TMap.Circle)
    });

    window.BM_BMapGL = BMapGL;
    } else {
      BMapGL = window.BM_BMapGL;
    }

    const el:any = document.querySelector(`#${elId.value}`);
    const map = new BMapGL.Map(el);
    map.disableDoubleClickZoom();

    el.bmapInst = map;

    map.addEventListener('zoomend', (e:any) => {
      emit('zoomend', {
        target: {zoomLevel: map.getZoom(),},
      });
    });
    map.addEventListener('click', (e:any) => {
      emit('click', {
        latlng: e.latlng,
      });
    });
    map.addEventListener('mousemove', (e:any) => {
      emit('mousemove', {
        latlng: e.latlng,
      });
    });


    setTimeout(async () => {
      map.centerAndZoom(mapCenter, +await map_set_bigemap.value.__getValue('zoom'));

      emitInject(instanceId, {
        map,
        instance,
        TMap,
      });
  
      emit('initd', {
        map, 
        instance,
        BMapGL,
      });
    }, 133);
  });
};

let mapCenter = { lng: 118.184217, lat: 39.64003 }; // 地图中心
// 获取地图中心点
const getMapCenter = async () => {
  // const centerRes: any = await proxy?.getConfigKey('gis.map.center');
  const centerRes: any = {
    data: await map_set_bigemap.value.__getValue('center'),
  };
  if (centerRes.data) {
    mapCenter = convertStringToLatLng(centerRes.data);
  }
};

onMounted(async () => {
  await getMapCenter();

  nextTick(() => {
    initMap();
  });
});

provide('getMapInstance', () => mapStore());

defineExpose({
  resize() {

  },
})
</script>

<style lang="scss">
body {
  --map-color-green: #2bb367;
  --map-color-blue: #409EFF;
}
.tiandimap {
  position: relative;
  z-index: 0;
}
.tiandimap-marker {
  z-index: 300;
}
.tiandimap-divIcon {
  align-items: center;
  justify-content: center;
  display: flex;
  white-space: nowrap;

  svg {
    position: static!important;
  }
}
// .tiandimap .tdt-overlay-pane {
//   &>svg {
//     pointer-events: none!important;
//   }
// }
.tiandimap .tdt-container {
  height: 100%;
}
.tiandimap .bigemap-popup-pane {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 901;

  .map-popup {
    position: absolute;
    visibility: hidden;
    pointer-events: none;

    &.show {
      visibility: visible;
      pointer-events: auto;
    }
  }
}
.tiandimap .bigemap-float-pane {
  position: absolute;
  left: 0;
  top: 0;
}
.tiandimap .bigemap-float-pane>div {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 900;
}
.tiandimap .bigemap-div-icon {
  width: auto!important;
  height: auto!important;
  margin-left: 0!important;
  margin-top: 0!important;
  background: none!important;
  border: none!important;
  pointer-events: none!important;
}
.tiandimap .bigemap-div-icon>div {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  white-space: nowrap;
  pointer-events: auto;
}
.tiandimap .bigemap-div-icon>div svg {
  position: static;
}

.tiandimap .operateWindow {
  display: none;
}
.tiandimap .operateWindow-popup
{
  &>.bigemap-popup-content-wrapper {
    background: transparent;
  }
  &>.bigemap-popup-tip-container {
    display: none;
  }
}
</style>